<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

const activeIndex = ref("");
let socket = null;
const messages = ref([]);
const router = useRouter();
const selectLocation = (type) => {
  activeIndex.value = type;
  localStorage.setItem("location", type);
};

const getClass = (type) => {
  if (activeIndex.value === type) {
    // 将选中的index发给socket
    sendMessage(type);
  }
  return {
    active: activeIndex.value === type,
    noactive: activeIndex.value !== "" && activeIndex.value !== type,
  };
};

onMounted(() => {
  startSocket();
});

// 开启socket
const startSocket = () => {
  // socket.value = new WebSocket("ws://111.231.145.175:8282");
  socket = io("http://b1740j1440.yicp.fun:47231/");
  socket.on("connect", function () {
    console.log("WebSocket 已连接");
    // 注册为小屏客户端
    socket.emit("register_client", { client_type: "small_screen" });
  });

  socket.on("disconnect", function () {
    console.log("WebSocket 已断开");
  });

  socket.on("registered", function (data) {
    console.log("成功注册为小屏客户端: " + JSON.stringify(data));
  });

  socket.on("location_selected_ack", function (data) {
    console.log("景点选择确认: " + JSON.stringify(data));
  });

  socket.on("location_confirmed_ack", function (data) {
    console.log("景点确认确认: " + JSON.stringify(data));
    // currentTaskId = data.task_id;
  });

  socket.on("generation_success", function (data) {
    console.log("生成成功: " + JSON.stringify(data));
  });

  socket.on("error", function (data) {
    console.log("错误: " + JSON.stringify(data));
  });

  // socket.value.onmessage = (event) => {
  //   console.log(event.data, "event.data");
  //   messages.value.push(event.data);
  // };
  // socket.value.onopen = () => {
  //   console.log("socket open");
  // };
  // socket.value.onclose = () => {
  //   console.log("socket close");
  // };
  // socket.value.onerror = (event) => {
  //   console.log("socket error", event);
  // };
};

const sendMessage = (message) => {
  let data = {
    type: "location",
    data: message,
  };
  console.log(data, "data");
  // 立即通过WebSocket通知大屏显示景点页面
  socket.emit("location_selected", { location_name: message });
};

const goToResult = () => {

  router.push("/small/result" + "?type=" + activeIndex.value);
};

onUnmounted(() => {
  if (socket) {
    socket.close();
  }
});
</script>

<template>
  <!-- 1 Alsoudah, 2 Diriyah, 3 Park, 4 Murabba, -->
  <div class="small">
    <div class="title">Destination selection</div>
    <div class="destination">
      <div
        class="item"
        :class="getClass('Alsoudah')"
        @click="selectLocation('Alsoudah')"
      >
        <img src="@/assets/images/small/loca1.png" alt="" />
      </div>
      <div
        class="item"
        :class="getClass('Diriyah')"
        @click="selectLocation('Diriyah')"
      >
        <img src="@/assets/images/small/loca2.png" alt="" />
      </div>
      <div
        class="item"
        :class="getClass('KingSalmanPark')"
        @click="selectLocation('KingSalmanPark')"
      >
        <img src="@/assets/images/small/loca3.png" alt="" />
      </div>
      <div
        class="item"
        :class="getClass('NewMurabba')"
        @click="selectLocation('NewMurabba')"
      >
        <img src="@/assets/images/small/loca4.png" alt="" />
      </div>
    </div>
    <stcBotton class="btnstart" title="Confirm" @click="goToResult" />
  </div>
</template>

<style scoped lang="scss">
.title {
  width: 100%;
  position: absolute;
  top: 5%;
  font-size: 60px;
  font-family: "stc-medium";
  color: #fff;
  text-align: center;
  line-height: 1;
}
.destination {
  width: 100%;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 880px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 40px;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition: all 0.3s ease;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .active {
    border: 3px solid #fff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  }
  .noactive {
    opacity: 0.5;
    filter: blur(4px);
  }
}
.btnstart {
  left: 50%;
  top: 86%;
  transform: translate(-50%, 0);
}
</style>
